<template>
  <a-row :gutter="8">
    <a-col :span="14">
      <a-select
        v-if="tagoption"
        v-model:value="article.tabs"
        mode="multiple"
        style="z-index: 1; width: 100%"
        placeholder="请选择文章标签"
        :options="tagoption"
        :notFoundContent="'novalue'"
      ></a-select>
    </a-col>
  </a-row>
  <br />
  <div id="app" style="z-index: 0">
    <div ref="articleRef" :model="article">
      <a-row :gutter="8">
        <a-col :span="14">
          <a-input
            v-model:value="article.a_title"
            placeholder="请输入文章标题"
          />
        </a-col>
        
        <a-col :span="5" v-if="a_id==null">
          <a-radio-button @click="publish">发布文章</a-radio-button>
        </a-col>
        <a-col :span="5" v-else>
          <a-radio-button @click="rePublish">重新发布</a-radio-button>
        </a-col>

      </a-row>

      <br />

      <!--a-checkbox-group v-model="checkedTags">
        <a-checkbox
          v-for="item in article_tag.items"
          :key="item.at_name"
          @change="addTags(item.at_tab)"
          >{{ item.at_name }}</a-checkbox
        >
      </a-checkbox-group-->

      <!-- 子组件将会在这里渲染出来  指定初始化的数据，以及监听数据更新的事件 -->
      <div v-if="publishedArticle.a_html != null">
        <wang-editor
          @editorContent="getEditorContent"
          :a_html="publishedArticle.a_html"
        />
      </div>
       <div v-else>
        <wang-editor @editorContent="getEditorContent" />
      </div>
    </div>
    <br />
  </div>
</template>

<script>
import {
  reactive,
  ref,
  onMounted,
  nextTick,
  toRefs,
  defineComponent,
} from "vue";
import WangEditor from "@/components/wangeditor.vue";

//引入自定义封装的函数或对象
import { get, post, tip } from "@/common";

export default defineComponent({
  name: "app",

  setup() {
    const tagoption = ref([
      { value: "", label: "" },
      { value: "", label: "" },
    ]);
    const articleRef = ref(null);
    const tabList = ref([]);

    const article = ref({
      a_title: "",
      a_html: "",
      tabs: [],
    });

    /*const aTagKey = ref({
      at_tab: "",
    });
    const checkedTags = ref([]);

    const article_tag = reactive({
      items: [{}],
      selectedTags: [],
    });*/

    const publish = () => {
      //then方法仅接收成功操作的结果
      post("/user/publish/", article.value).then((res) => {
        tip.success("文章发布成功！");
        window.location.href = "/user/home";
      });
    };

    const getEditorContent = (data) => {
      // 获取编辑器内容
      article.value.a_html = data;
      // console.log(data);
      // console.log(articleRef.value);
    };

    /*const getTags = () => {
      post("/user/publish/getTags", aTagKey.value).then((res) => {
        article_tag.items = res.data;
        // console.log(article_tag.items)
      });
    };

    const addTags = (tag, checked) => {};

    onMounted(() => {
      nextTick(() => {
        getTabList();
      });
    });*/
    const getTabList = () => {
      get("/user/feed/gettablist").then((res) => {
        tabList.value = res.data;
        var tmps2 = [];
        for (let i = 0; i < res.data.length; i++) {
          var tmp2 = { value: "", label: "" };
          tmp2.value = res.data[i].at_tab;
          tmp2.label = res.data[i].at_name;
          tmps2.push(tmp2);
          console.log(tmps2);
        }
        tagoption.value = tmps2;
        console.log(tagoption.value);
      });
    };

    const selector = () => {
      var tmps2 = [];
      for (let i = 0; i < tabList.value.length; i++) {
        var tmp2 = { value: "", label: "" };
        tmp2.value = tabList.value[i].at_tab;
        tmp2.label = tabList.value[i].at_name;
        tmps2.push(tmp2);
        console.log(tmps2);
      }
      tagoption.value = tmps2;
    };

    const rePublish = () => {
      //then方法仅接收成功操作的结果
      post("/user/publish/edit/"+a_id.value, article.value).then((res) => {
        tip.success("文章重新发布成功！");
        window.location.href = "/user/home";
      });
    };
    const publishedArticle = ref({});
    const getPublishedAriticle = () => {
      get("/user/publish/getPublishedAriticle/" + a_id.value).then((res) => {
        article.value = res.data;
        publishedArticle.value = res.data;
        // console.log("asd:"+publishedArticle.value.a_html);
        // article.a_title=publishedArticle.value.a_title;
        // article.tabs=publishedArticle.value.tabs;
      });
    };
    const a_id = ref();
    const seta_id = () => {
      a_id.value = window.location.search.split("=")[1];
      getTabList();
      if(a_id.value!=null){getPublishedAriticle();}
      
    };
    seta_id();

    return {
      tabList,
      tagoption,
      articleRef,
      article,
      getEditorContent,
      publish,
      getTabList,
      selector,
      seta_id,
      a_id,
      getPublishedAriticle,
      publishedArticle,
      rePublish
    };
  },

  components: {
    WangEditor,
  },
});
</script>
